<template>
  <el-dialog :visible.sync="visible"
             :title="showDelete?$t('delete'):$t('custom.widget.linkedbtn')"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="920px">
    <div v-show="showDelete"
         style="margin-bottom:15px;margin-left:15px;">
      <i class="el-icon-warning"
         size="24px"
         style="color:#E6A23C;"></i>
      <span style="font-weight: 400;margin-left:5px;">{{$t('custom.widget.deletecontent')}}</span>
    </div>
    <ejs-grid style="margin-top: 10px;"
              :dataSource="comDataList"
              :allowResizing="gridSettings.allowResizing"
              :allowFiltering="gridSettings.allowFiltering"
              :filterSettings="gridSettings.filterSettings"
              :allowGrouping="gridSettings.allowGrouping"
              :allowPaging="gridSettings.allowPaging"
              :toolbar="gridSettings.toolbar"
              :allowTextWrap="gridSettings.allowTextWrap"
              :showColumnChooser="gridSettings.showColumnChooser"
              :allowReordering="gridSettings.allowReordering"
              :allowSorting="gridSettings.allowSorting"
              :pageSettings="gridSettings.pageSettings"
              :showColumnMenu='gridSettings.showColumnMenu'
              ref="grid"
              height="50vh"
              v-loading='loading'
              :commandClick="commandClick"
              :sortSettings="gridSettings.sortSettings">
      <e-columns>
        <e-column field="name"
                  :headerText="$t('custom.dataset.name')"
                  width="140"
                  clipMode='EllipsisWithTooltip'></e-column>
        <e-column field="businessType"
                  :headerText="$t('custom.dataset.businessType')"
                  :width="70"></e-column>
        <e-column field="status"
                  :headerText="$t('custom.dataset.status')"
                  :width="70"></e-column>
        <e-column field="updateDate"
                  :headerText="$t('custom.reports.updateDate')"
                  :width="100"
                  :template="UpdateDateFormat"></e-column>
        <e-column :width="70"
                  :commands="commandsView"></e-column>
      </e-columns>
    </ejs-grid>
    <template slot="footer">
      <el-button @click="visible = false"
                 size="small">{{ $t('cancel') }}</el-button>
      <el-button type="danger"
                 size="small"
                 v-show="showDelete&&comDataList<1"
                 @click="deleteSubmitHandle()">{{ $t('delete') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import UpdateDateFormat from '@/components/grid-format/UpdateDateFormat.vue'

export default {
  data () {
    return {
      visible: false,
      loading: false,
      dataForm: {
        gadgetId: null
      },
      deleteData: {
        id: null
      },
      linkedData: [],
      gridSettings: {
        showColumnMenu: false,
        allowResizing: true,
        allowFiltering: true,
        filterSettings: { type: 'Excel' },
        allowGrouping: false,
        allowPaging: true,
        allowExcelExport: true,
        allowPdfExport: true,
        toolbar: ['Search'], // ColumnChooser
        showColumnChooser: false,
        groupOptions: { columns: ['name'] },
        allowReordering: true,
        allowSorting: true,
        allowTextWrap: true,
        height: window.innerHeight - 230,
        pageSettings: { pageSize: 100, pageSizes: [10, 50, 100, 200, 1000], pageCount: 4 },
        groupSettings: {
          allowReordering: false,
          columns: [],
          disablePageWiseAggregates: false,
          enableLazyLoading: false,
          showDropArea: true,
          showGroupedColumn: false,
          showToggleButton: false
        },
        sortSettings: {
          columns: [
            { field: 'name', direction: 'Ascending' }
          ]
        }
      },
      UpdateDateFormat: function () {
        return { template: UpdateDateFormat }
      },
      commandsView: [
        {
          type: 'View',
          buttonOption: {
            content: this.$t('custom.reports.viewbtn'),
            cssClass: 'e-outline e-small e-primary'
          }
        }
      ],
      showDelete: false

    }
  },

  components: {
    UpdateDateFormat

  },
  computed: {
    dataRule () {
      return {}
    },
    comDataList () {
      var _self = this
      var retdata = _self.linkedData
      return retdata
    }
  },
  watch: {
    visible (val) {
      if (!val) {
        this.linkedData = []
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.gadgetId) {
          this.getInfo()
        }
      })
    },
    getInfo () {
      this.loading = true
      const params = {
        gadgetId: this.dataForm.gadgetId,
        reuse: true
      }
      this.$interface.reports.getReportByModelListApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.linkedData = res.data
        this.loading = false
      })
    },
    verifyForm () {
      return this.$refs['dataForm'].validate()
    },
    commandClick (e) {
      if (e.commandColumn.type === 'View') {
        this.showReport(e.rowData)
      }
    },
    showReport (data) {
      this.$store.state.rowData = data
      if (data.layoutType === 'report_layout') {
        this.$router.push({
          path: `dashboard-${data.id}`,
          query: { pageid: `${data.id}`, integration: `${data.integration}`, type: 'report', businessType: `${data.businessType}`, name: data.name, layout: data.layoutType }
        })
      } else {
        this.$router.push({
          path: `scorecard-${data.id}`,
          query: { pageid: `${data.id}`, integration: `${data.integration}`, type: 'report', businessType: `${data.businessType}`, name: data.name, layout: data.layoutType }
        })
      }

      this.visible = false
    },
    deleteSubmitHandle () {
      this.$confirm(this.$t('custom.widget.deleteconfirm'), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        const params = {
          ...this.deleteData
        }
        this.$interface.reports.delReportSetting(params).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.visible = false
          this.$emit('refreshDataList')
          return this.$message.success(res.msg)
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss">
.mod-sys__user {
  .role-list {
    .el-select {
      width: 100%;
    }
  }
}
</style>
